<template>
  <div>
    <togetherHead :bgc="bgc" :boolen1="boolen1" :boolen2="boolen2"></togetherHead>
    <togetherTwo></togetherTwo>
    <togetherThree></togetherThree>
    <div class="hot" :class="myclass">
        <div :class="{ 'newsCss': nums == index }" v-for="(v,index) in hotArr" :key="index" @click="toPage(v.pushs,index)">
            <img :src="v.img" alt="" >
        </div>
    </div>
    <keep-alive>
    <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import togetherHead from '../Together/togetherHead.vue';
import togetherTwo from '../Together/togetherTwo.vue';
import togetherThree from '../Together/togetherThree.vue';
export default {
    data(){
        return{
            hotArr:[
                { img:"https://gw.alicdn.com/imgextra/i3/O1CN0142WbK91TOQHNOdmeQ_!!6000000002372-2-tps-432-204.png",pushs:"pages1"},
                { img: "https://gw.alicdn.com/imgextra/i2/O1CN01QMq2sU2134jiIUZ7A_!!6000000006928-2-tps-432-204.png", pushs: "pages2" },
                { img: "https://gw.alicdn.com/imgextra/i4/O1CN013Rg3vi1cOGfQ0geeU_!!6000000003590-2-tps-432-204.png", pushs: "pages3" },
                { img: "https://gw.alicdn.com/imgextra/i2/O1CN01bS74QM1R8jSmvpcEA_!!6000000002067-2-tps-432-204.png", pushs: "pages4" },
            ],
            nums:0,
            bgc:"",
            boolen1:true,
            boolen2:false,
            myclass:""
        }
    },
    components:{
        togetherHead,
        togetherTwo,
        togetherThree
    },
    methods:{
        toPage(pushs, index) {
            this.$router.push(`/TogetherPage/${pushs}`).catch(err => { })
            this.nums = index
        }
    },
    mounted() {
        window.onscroll = () => {
            if (document.documentElement.scrollTop > 44) {
                this.bgc = "navnew"
                this.boolen2 = true
                this.boolen1 = false
            } else {
                this.bgc = "nav"
                this.boolen1 = true
                this.boolen2 = false
            }
            if (document.documentElement.scrollTop > 335) {
                this.myclass = "hots"
              
            } else {
                this.myclass = ""
                
            }
        }

    }
}
</script>

<style scoped>
.hot{
    width: 100%;
    height: 51.03px;
    display: flex;
    background: #f5f5f5;
}
.hots {
    position: fixed;
    top: 44px;
    left: 0;
}
    .hot div{
        flex-shrink: 1;
        width: 100%;
        height: 100%;
    }
    .hot div img{
        width: 100%;
        height: 100%;
    }
    .newsCss{
        background: #fff;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
</style>